<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#div1 {
			height: 200px;
			width: 400px;
			line-height: 100px;
			border: 1px solid;
			position: absolute;
			left: 60px;
			top: 200px;
			background-color: black;
			color: white;
			font-size: 50px;
			display: none;
			text-align: center;
		}
		a{
			text-decoration: none;
		}
	</style>

	<body>
		<p><a href="shijian.html">LED时间</a></p>
		<p><a href="shizhong.html">表</a></p>
		<h1 id="h01">白先黑后</h1>
		<div id="div1">

		</div>
		<canvas id="mycan"></canvas>
		<script type="text/javascript">
			var can = document.getElementById("mycan");
			var isbai = true;
			
			can.onclick = function(event) {
				var zx = event.offsetX - 25;
				var zy = event.offsetY - 25;
				for(var y = 0; y < wzq.length; y++) {
					for(var x = 0; x < wzq[y].length; x++) {
						var c = Math.sqrt(Math.pow((y * 32 - zy), 2) + Math.pow((x * 32 - zx), 2));
						
						if(c <= 15 && wzq[y][x] == 0) {
							
							wzq[y][x] = isbai ? 1 : 2;
							bi.translate(25, 25);
							bi.beginPath();
							bi.arc(x * 32, y * 32, 15, 0, 2 * Math.PI);
							bi.fillStyle = isbai ? "white" : "black";
							bi.fill();
							bi.translate(-25, -25);

							if(yanZheng(y, x)) {
								var div = document.getElementById("div1");
								div.innerHTML = isbai ? "白方胜利<br/>点击下一局" : "黑方胜利<br/>点击下一局"
								div.style.display = "block"
								div.onclick = function() {
									div.style.display = "none"
									bi.closePath(0, 0, 500, 500)
									bi.fillStyle = "yellow";
									bi.fillRect(0, 0, can.width, can.height);
									bi.strokeStyle = "black";
									bi.strokeRect(10, 10, 480, 480);
									qP();
									init();
									huaQi()
								};
							};
							

							isbai = !isbai;
							document.getElementById("h01").innerHTML = isbai ? "请白方下棋" : "请黑方下棋";
							break;
						};
					};
				};
			};


			function yanZheng(cy, cx) {
				//				console.log(cx + "," + cy + "-----" + wzq[cy][cx])
				var qinum = 0;
				//横向
				for(var x = 0; x < 15; x++) {
					if(wzq[cy][x] == (isbai ? 1 : 2)) {
						qinum++;
						if(qinum == 5) {
							return true;
						};
					} else {
						qinum = 0
					};
				};
				//纵向
				qinum = 0;
				for(var y = 0; y < 15; y++) {
					if(wzq[y][cx] == (isbai ? 1 : 2)) {
						qinum++;
						if(qinum == 5) {
							return true;
						};
					} else {
						qinum = 0
					};
				};
				//45度
				qinum = 0
				vx = (cx + cy > 14 ? 14 : cx + cy);
				vy = cx + cy - vx;
				for(; vx >= 0 && vy <= 14 && vy >= 0 && vx <= 14; vy++, vx--) {
					if(wzq[vy][vx] == (isbai ? 1 : 2)) {
						qinum++;
						if(qinum == 5) {
							return true;
						};
					} else {
						qinum = 0;
					};
				};
				//210度
				if(cy >= cx) {
					qinum = 0
					vy = cy - cx;
					vx = 0;
					for(; vx >= 0 && vy <= 14 && vy >= 0 && vx <= 14; vy++, vx++) {
						if(wzq[vy][vx] == (isbai ? 1 : 2)) {
							qinum++;
							if(qinum == 5) {
								return true;
							};
						} else {
							qinum = 0;
						};
					};
				} else {
					qinum = 0
					vx = cx - cy;
					vy = 0;
					for(; vx >= 0 && vy <= 14 && vy >= 0 && vx <= 14; vy++, vx++) {
						if(wzq[vy][vx] == (isbai ? 1 : 2)) {
							qinum++;
							if(qinum == 5) {
								return true;
							};
						} else {
							qinum = 0;
						};
					};
				}

			};

			can.width = 500;
			can.height = 500;
			var bi = can.getContext("2d");
			bi.fillStyle = "yellow";
			bi.fillRect(0, 0, can.width, can.height);
			bi.strokeStyle = "black";
			bi.strokeRect(10, 10, 480, 480);
			var wzq = [];

			function init() {
				wzq = [];
				for(var i = 0; i < 15; i++) {
					wzq[i] = [];
					for(var k = 0; k < 15; k++) {
						wzq[i][k] = 0;
					};
				};
				//				console.log(wzq)
			};

			function huaQi() {
				bi.translate(25, 25);
				for(var i = 0; i < wzq.length; i++) {
					for(var k = 0; k < wzq[i].length; k++) {
						if(wzq[i][k] == 1) {
							bi.beginPath();
							bi.arc(i * 32, k * 32, 15, 0, 2 * Math.PI);
							bi.fillStyle = "white";
							bi.fill();
						} else if(wzq[i][k] == 2) {
							bi.beginPath();
							bi.arc(i * 32, k * 32, 15, 0, 2 * Math.PI);
							bi.fillStyle = "black";
							bi.fill();
						};
					};
				};
				bi.translate(-25, -25);
			};

			function qP() {
				for(var i = 0; i < 15; i++) {
					bi.beginPath();
					bi.moveTo(25, i * 32 + 25);
					bi.lineTo(474, i * 32 + 25);
					bi.stroke();
				};
				for(var i = 0; i < 15; i++) {
					bi.beginPath();
					bi.moveTo(i * 32 + 25, 25);
					bi.lineTo(i * 32 + 25, 474);
					bi.stroke();
				};
			};
			qP();
			init();
			huaQi()
		</script>
	</body>

</html>